<template>
    <div class="home">
       <Toolbar/>
       <main>
          <section class="left">
            <ComponentList/>
          </section>
          <section class="center">
            <div class="content"
                 @drop="handleDrop"
                 @dragover="handleDragOver"
                 @mousedown="handleMouseDown"
                 @mouseup="selectCurComponent"
            >
              <Edits/>
            </div>
          </section>
          <section class="right">444</section>
        </main>
    </div>
</template>
    <script>
    import Toolbar from '@/components/Toolbar.vue'
    import ComponentList from '@/components/ComponentList.vue'
    import Edits from '@/components/Edits/Edits.vue'
    import componentList from '@/custom-component/component-list'
    import {deepCopy} from "@/utils/utils"
    import {mapState} from 'vuex'
    export default {
      name: 'App',
      components: {
        Toolbar,
        ComponentList,
        Edits,
      },
      data() {
        return {
          id:0
        }
      },
      computed:{
        ...mapState(['editor'])
      },
      mounted() {
        console.log(this.editor)
      },
      methods: {
        //为每个组件挂个id
        getId(){
          return this.id++
        },
        selectCurComponent(e){
          console.log(e)
        },
        handleMouseDown(e){
          e.preventDefault()
          e.dataTransfer.dropEffect = 'copy'
          console.log(e)
        },
        handleDragOver(e){
           e.preventDefault()
           e.dataTransfer.dropEffect = 'copy'
        },

        handleDrop(e){
          e.preventDefault()
          e.stopPropagation()
          const index = e.dataTransfer.getData('index')
          const rectInfo = this.editor.getBoundingClientRect()

          if(index !== undefined){
                 const component = deepCopy(componentList[index])
                 component.style.top = e.clientY - rectInfo.y +'px'
                 component.style.left = e.clientX - rectInfo.x +'px'

                 component.id = this.getId()  
                 this.$store.commit('addComponent',{component})

          }
        }
      },
    }
    </script>
    
    <style lang="scss" >
    .home{
       height: 100vh;
       background-color: #fff;

       main {
         height: calc(100% - 64px);
         position: relative;

         .left {
            position:absolute;
            height: 100%;
            width: 200px;
            left:0;
            top:0
         }
         .right{
           position: absolute;
           height: 100%;
           width: 262px;
           right:0;
           top:0
         }
         .center{
           overflow: auto;
           margin-left: 200px;
           margin-right: 262px;
           height: 100%;
           background-color: antiquewhite;
           padding: 20px;

           .content{
             width: 100%;
             height: 100%;
             overflow: auto;
           }
         }
     }
    }
    </style>
    